import React, { useState } from 'react';
import { motion } from 'framer-motion';
import CreateDesign from '../components/CreateDesign';

const Design: React.FC = () => {
  const [processedImage, setProcessedImage] = useState<string | null>(null);

  const handleDesignCreated = (imageUrl: string) => {
    setProcessedImage(imageUrl);
    console.log('Design created:', imageUrl);
  };

  const handleCreditsUpdated = () => {
    // 可以在这里添加更新积分的逻辑，如果需要的话
    console.log('Credits updated');
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">Room Designer</h1>
          <p className="text-xl text-gray-600">Upload your room photo and let AI transform it into your dream space</p>
        </div>

        <div className="grid grid-cols-1 gap-12">
          {/* 使用CreateDesign组件替换原有的实现 */}
          <CreateDesign 
            onDesignCreated={handleDesignCreated}
            onCreditsUpdated={handleCreditsUpdated}
          />
        </div>
      </div>
    </div>
  );
};

export default Design;
